<script setup lang="ts">
import {onMounted, reactive, ref} from "vue";
import {listProblemsApi} from "@/api/client/problem.ts";
import router from "@/router";

const problemQuery = reactive({
  difficulty: undefined,
  keyword: '',
  pageSize: 10,
  pageNum: 1
})

const problemList = reactive({
  rows: [],
  total: 0
})

async function search() {
  const data = await listProblemsApi(problemQuery.difficulty, problemQuery.keyword, problemQuery.pageSize, problemQuery.pageNum) as any
  problemList.rows = data.rows
  problemList.total = data.total
  console.log(problemList)
}

onMounted(async function () {
  await search()
})

async function reset() {
  problemQuery.difficulty = undefined
  problemQuery.keyword = ''
  problemQuery.pageNum = 1
  problemQuery.pageSize = 10
  await search()
}

async function redirectProblemAnswer(id: string) {
  await router.push({
    path: '/client/problem/answer',
    query: {
      id: id
    }
  })
}

</script>

<template>
  <div>
    <div class="container">
      <div class="header">
        <!--    题目难度选择-->
        <el-select v-model="problemQuery.difficulty" placeholder="选择难度" style="width: 200px;">
          <el-option label="简单" :value="1"/>
          <el-option label="中等" :value="2"/>
          <el-option label="困难" :value="3"/>
        </el-select>
        <el-input v-model="problemQuery.keyword" placeholder="搜索题目、内容" style="width: 400px; margin-left: 10px;"/>
        <el-button type="primary" @click="search" style="margin-left: 10px;">搜索</el-button>
        <el-button @click="reset" style="margin-left: 10px;">重置</el-button>
      </div>
      <div class="content">
        <el-table :data="problemList.rows" stripe style="width: 100%">
          <el-table-column prop="title" label="标题" width="500" show-overflow-tooltip/>
          <el-table-column label="难度" min-width="200">
            <template #default="scope">
              <span v-if="scope.row.difficulty === 1"><el-tag type="primary">简单</el-tag></span>
              <span v-else-if="scope.row.difficulty === 2"><el-tag type="warning">中等</el-tag></span>
              <span v-else-if="scope.row.difficulty === 3"><el-tag type="danger">困难</el-tag></span>
              <span v-else>{{ scope.row.difficulty }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" min-width="200">
            <template #default="scope">
              <el-button size="small" @click="redirectProblemAnswer(scope.row.id)">
                开始答题
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="footer">
        <div class="page">
          <el-pagination background layout="prev, pager, next"
                         :current-page="problemQuery.pageNum"
                         @update:current-page="(newPage:any) => { problemQuery.pageNum = newPage; search(); }"
                         :page-size="problemQuery.pageSize"
                         :total="problemList.total"/>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.container {
  .content {
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .footer {
    width: 100%;
    display: flex;
    justify-content: center;

  }
}
</style>